
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">

    <title>HTML-Ipsum</title>

    <link rel="stylesheet" href="css/style.css?v=1.9">
    <link rel="icon" href="favicon.ico" />
</head>

<body>

<div id="header">

    <h1>HTML-Ipsum</h1>

    <div id="copied-notice">Copied to clipboard!</div>

</div>

<div class="col">
    <fieldset>
        <legend>Long Paragraph</legend>
        <textarea rows="10" cols="50" class="para">&lt;p&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus&lt;/p&gt;</textarea>
    </fieldset>

    <fieldset>
        <legend>Medium Paragraph</legend>
        <textarea rows="10" cols="50" class="para">&lt;p&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.&lt;/p&gt;</textarea>
    </fieldset>

    <fieldset>
        <legend>One Sentence</legend>
        <textarea rows="10" cols="50" class="para">&lt;p&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.&lt;/p&gt;</textarea>
    </fieldset>

    <fieldset>
        <legend>Definition List</legend>
        <textarea rows="10" cols="50">&lt;dl&gt;
   &lt;dt&gt;Definition list&lt;/dt&gt;
   &lt;dd&gt;Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.&lt;/dd&gt;
   &lt;dt&gt;Lorem ipsum dolor sit amet&lt;/dt&gt;
   &lt;dd&gt;Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.&lt;/dd&gt;
&lt;/dl&gt;</textarea>
    </fieldset>
</div>

<div class="col">
    <fieldset>
        <legend>Unordered List: Short Items</legend>
        <textarea rows="10" cols="50">
&lt;ul&gt;
   &lt;li&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/li&gt;
   &lt;li&gt;Aliquam tincidunt mauris eu risus.&lt;/li&gt;
   &lt;li&gt;Vestibulum auctor dapibus neque.&lt;/li&gt;
&lt;/ul&gt;
         </textarea>
    </fieldset>

    <fieldset>
        <legend>Unordered List: Long Items</legend>
        <textarea rows="10" cols="50">
&lt;ul&gt;
   &lt;li&gt;Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.&lt;/li&gt;
   &lt;li&gt;Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.&lt;/li&gt;
   &lt;li&gt;Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.&lt;/li&gt;
   &lt;li&gt;Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.&lt;/li&gt;
&lt;/ul&gt;
            </textarea>
    </fieldset>

    <fieldset>
        <legend>Ordered List: Short Items</legend>
        <textarea rows="10" cols="50">
&lt;ol&gt;
   &lt;li&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/li&gt;
   &lt;li&gt;Aliquam tincidunt mauris eu risus.&lt;/li&gt;
   &lt;li&gt;Vestibulum auctor dapibus neque.&lt;/li&gt;
&lt;/ol&gt;
         </textarea>
    </fieldset>

    <fieldset>
        <legend>Unordered List Navigation</legend>
        <textarea rows="10" cols="50">&lt;nav&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href=&quot;#nowhere&quot; title=&quot;Lorum ipsum dolor sit amet&quot;&gt;Lorem&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#nowhere&quot; title=&quot;Aliquam tincidunt mauris eu risus&quot;&gt;Aliquam&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#nowhere&quot; title=&quot;Morbi in sem quis dui placerat ornare&quot;&gt;Morbi&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#nowhere&quot; title=&quot;Praesent dapibus, neque id cursus faucibus&quot;&gt;Praesent&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#nowhere&quot; title=&quot;Pellentesque fermentum dolor&quot;&gt;Pellentesque&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/nav&gt;
            </textarea>
    </fieldset>
</div>

<div class="col last">

    <fieldset>
        <legend>Kitchen Sink</legend>
        <textarea rows="10" cols="50">&lt;h1&gt;HTML Ipsum Presents&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Pellentesque habitant morbi tristique&lt;/strong&gt; senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. &lt;em&gt;Aenean ultricies mi vitae est.&lt;/em&gt; Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, &lt;code&gt;commodo vitae&lt;/code&gt;, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. &lt;a href=&quot;#&quot;&gt;Donec non enim&lt;/a&gt; in turpis pulvinar facilisis. Ut felis.&lt;/p&gt;

&lt;h2&gt;Header Level 2&lt;/h2&gt;

&lt;ol&gt;
   &lt;li&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/li&gt;
   &lt;li&gt;Aliquam tincidunt mauris eu risus.&lt;/li&gt;
&lt;/ol&gt;

&lt;blockquote&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.&lt;/p&gt;&lt;/blockquote&gt;

&lt;h3&gt;Header Level 3&lt;/h3&gt;

&lt;ul&gt;
   &lt;li&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/li&gt;
   &lt;li&gt;Aliquam tincidunt mauris eu risus.&lt;/li&gt;
&lt;/ul&gt;

&lt;pre&gt;&lt;code&gt;
#header h1 a {
  display: block;
  width: 300px;
  height: 80px;
}
&lt;/code&gt;&lt;/pre&gt;</textarea>
    </fieldset>


    <fieldset>
        <legend>Example Form</legend>
        <textarea rows="10" cols="50">&lt;form action=&quot;#&quot; method=&quot;post&quot;&gt;
    &lt;div&gt;
         &lt;label for=&quot;name&quot;&gt;Text Input:&lt;/label&gt;
         &lt;input type=&quot;text&quot; name=&quot;name&quot; id=&quot;name&quot; value=&quot;&quot; tabindex=&quot;1&quot; /&gt;
    &lt;/div&gt;

    &lt;div&gt;
         &lt;h4&gt;Radio Button Choice&lt;/h4&gt;

         &lt;label for=&quot;radio-choice-1&quot;&gt;Choice 1&lt;/label&gt;
         &lt;input type=&quot;radio&quot; name=&quot;radio-choice-1&quot; id=&quot;radio-choice-1&quot; tabindex=&quot;2&quot; value=&quot;choice-1&quot; /&gt;

     &lt;label for=&quot;radio-choice-2&quot;&gt;Choice 2&lt;/label&gt;
         &lt;input type=&quot;radio&quot; name=&quot;radio-choice-2&quot; id=&quot;radio-choice-2&quot; tabindex=&quot;3&quot; value=&quot;choice-2&quot; /&gt;
    &lt;/div&gt;

  &lt;div&gt;
    &lt;label for=&quot;textarea&quot;&gt;Textarea:&lt;/label&gt;
    &lt;textarea cols=&quot;40&quot; rows=&quot;8&quot; name=&quot;textarea&quot; id=&quot;textarea&quot;&gt;&lt;/textarea&gt;
  &lt;/div&gt;

  &lt;div&gt;
      &lt;label for=&quot;checkbox&quot;&gt;Checkbox:&lt;/label&gt;
    &lt;input type=&quot;checkbox&quot; name=&quot;checkbox&quot; id=&quot;checkbox&quot; /&gt;
    &lt;/div&gt;

  &lt;div&gt;
      &lt;input type=&quot;submit&quot; value=&quot;Submit&quot; /&gt;
    &lt;/div&gt;
&lt;/form&gt;</textarea>
    </fieldset>

    <fieldset>
        <legend>Empty Table</legend>
        <textarea rows="10" cols="50">&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;&lt;/th&gt;
      &lt;th&gt;&lt;/th&gt;
      &lt;th&gt;&lt;/th&gt;
      &lt;th&gt;&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</textarea>
    </fieldset>

    <fieldset>
        <legend>Standard List Navigation</legend>
        <textarea rows="10" cols="50">&lt;nav&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Clients&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/nav&gt;</textarea>
    </fieldset>

</div>

<div style="clear: both;"></div>

<fieldset id="info">
    <h2>HTML-Ipsum Info</h2>
    <p>You’ve probably heard of <a href="http://www.webpagefx.com/tools/lorem-ipsum-generator/">Lorem Ipsum</a> before – it’s the most-used dummy text excerpt out there. People use it because it has a fairly normal distribution of letters and words (making it look like normal English), but it’s also Latin, which means your average reader won’t get distracted by trying to read it. It’s perfect for showcasing design work as it should look when fleshed out with text, because it allows viewers to focus on the design work itself, instead of the text. It’s also a great way to showcase the functionality of programs like word processors, font types, and more.</p>
    <p>We’ve taken Lorem Ipsum to the next level with our HTML-Ipsum tool. As you can see, this Lorem Ipsum is tailor-made for websites and other online projects that are based in HTML. Most <a href="http://www.webpagefx.com/How-much-should-web-site-cost.html">web design projects</a> use Lorem Ipsum excerpts to begin with, but you always have to spend an annoying extra minute or two formatting it properly for the web. </p>
    <p>Maybe you have a custom-styled ordered list you want to show off, or maybe you just want a long chunk of Lorem Ipsum that’s already wrapped in paragraph tags. No matter the need, we’ve put together a number of Lorem Ipsum samples ready to go with HTML tags and formatting in place. All you have to do is click the heading of any section on this page, and that HTML-Ipsum block is copied to your clipboard and ready to be loaded into a website redesign template, brand new design mockup, or any other digital project you might need dummy text for.</p>
    <p>No matter the project, please remember to replace your fancy HTML-Ipsum with real content before you go live - this is especially important if you're planning to implement a <a href="http://www.webpagefx.com/content-marketing-strategy.html">content-based marketing strategy</a> for your new creation! Lorem Ipsum text is all well and good to demonstrate a design or project, but if you set a website loose on the Internet without replacing dummy text with relevant, <a href="http://www.webpagefx.com/content-marketing/elements-of-high-quality-content.html">high quality content</a>, you’ll run into all sorts of potential <a href="http://www.webpagefx.com/SEO-Pricing.html">Search Engine Optimization</a> issues like thin content, duplicate content, and more.</p>
</fieldset>

<div id="footer">
    <p>HTML-Ipsum - <a href="http://www.webpagefx.com">WebpageFX 2017</a></p>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="js/ZeroClipboard.js"></script>
<script src="js/ipsum.js"></script>

<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-124525-1', 'auto');
    ga('send', 'pageview');

</script>

</body>

</html>